<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/css/commen.css"/>
		<link rel="stylesheet" type="text/css" href="/css/shopcar.css"/>
		<script src="/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/shopcar.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.shops{
				width: 130px;
				height:  150px;
			}
		.add {
			font-size: 15px;
		}
		.reduce{
			font-size: 15px;
		}
		</style>
		<script type="text/javascript">
			function settlement(){
				var totalprice = document.getElementById("totalprice").innerText;
				console.log(totalprice)
				
			}
		</script>
	</head>
	<body>
		<!--头部顶端登录注册栏开始-->
		<div id="box">
				<div id="toplogin" th:include="state :: topstate"></div>
	<span th:substi></span>
		</div>
		
	<div class="innerbox">		
			<div id="header">
				<a href="###" id="logo"><img src="/bookimg/07.png"/></a>
				<div id="searchcontainer"><form method="post" action=""><input type="text" name="searchinput" class="keyword" value="创意文具" data-title ="创意文具"/><input type="button" class="btnsearch" /></form></div>
	       
	       <div class="address">
	       	配送至 <select name="">
	       		<option value="">成都高新区三环内</option>
	       		<option value="">成都高新区三环内</option>
	       		<option value="">成都高新区三环内</option>
	       		<option value="">成都高新区三环内</option>
	            </select>
	       </div>    
	            	
		</div>
	</div>
	<!--全部商品开始-->
	<div id="allshop">
		<p>全部商品（2）</p>
		<div class="title">
			<ul>
				<li><input type="checkbox" class="all" />全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
		</div>
		<div class="shop spacil">
			<ul>
				<li><input type="checkbox" class="one" /></li>
				<li><img src="/img/index08_05.jpg"/>从你的全世界路过</li>
				<li class="price">41.00</li>
				<li><span class="add">+</span><input type="text" value="1" class="sum"/><span class="reduce">-</span></li>
				<li class="sumtotle">41.00</li>
				<li><a href="###">删除</a>
					<a href="###">移到我的关注</a></li>
			</ul>	
			<ul th:each="data : ${shops}">
				<li><input type="checkbox" class="one" /></li>
				<li ><img class="shops" th:src="|https://${data.goodsImg}|"/><span class="shopspan" th:text="${data.goodsName}"></span></li>
				<li class="price" th:text="${data.goodsPrice}"></li>
				<li><span class="add">+</span><input type="text" th:value="${data.count}" class="sum"/><span class="reduce">-</span></li>
				<li class="sumtotle" th:text="${data.goodsPrice}"></li>
				<li><a href="###">删除</a>
					<a href="###">移到我的关注</a></li>
			</ul>
		</div>
			
		<div class="allcho">
			<ul>
				<li><input type="checkbox" class="all" />全选</li>
				<li>已选择<span class="a totlecount">1</span>件商品</li>
				<li><span>总价</span> <span id="totalprice"class="a totleprice">0</span></li>
				<li><a href="javascript:void(0);" onclick="settlement()">去结算</a></li>
			</ul>	
		</div>
	</div>
	<!--全部商品结束-->
	<div id="hotbook">
			<div class="content">
				<p><span>猜你喜欢</span></p>
				<ul>
					<li>
						<a href="###"><img src="/bookimg/22935553-1_l.jpg"/></a>
						<img src="/bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="/bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="/bookimg/22935553-1_l.jpg"/></a>
						<img src="/bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="/bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="/bookimg/22935553-1_l.jpg"/></a>
						<img src="/bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="/bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="/bookimg/22935553-1_l.jpg"/></a>
						<img src="/bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="/bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="/bookimg/22935553-1_l.jpg"/></a>
						<img src="/bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="/bookimg/22935553-1_l.jpg"/></a>
						<img src="/bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="/bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
					
				</ul>
			</div>
		</div>
		<!--人气单品结束-->
		<div id="ad">
			<a href=""><img src="/bookimg/1.bmp"/></a>
		</div>
		<!--送货方式开始-->
		<div id="end">
			<div class="content">
				<ul>
					<li><a href="###"><img src="/img/222_13.png"/></a></li>
					<li><a href="###"><img src="/img/222_11.png"/></a></li>
					<li><a href="###"><img src="/img/222_15.png"/></a></li>
					<li><a href="###"><img src="/img/222_17.png"/></a></li>
				</ul>
			</div>
		</div>
		<!--送货方式结束-->
		<!--网页底部开始-->
		<div class="footer">
			<div class="_table">
				<table border="0" cellspacing="2px" cellpadding="8px">
					<tr>
						<th><a href="###">购物指南</a></th>
						<th><a href="###">支付方式</a></th>
						<th><a href="###">订单服务</a></th>
						<th><a href="###">退换货</a></th>
						<th><a href="###">商家服务</a></th>
					</tr>
					<tr>
						<td><a href="###">购物流程</a></td>
						<td><a href="###">货到付款</a></td>
						<td><a href="###">订单配送查询</a></td>
						<td><a href="###">退换货政策</a></td>
						<td><a href="###">商家中心</a></td>
					</tr>
					<tr>
						<td><a href="###">发票制度</a></td>
						<td><a href="###">网上支付</a></td>
						<td><a href="###">订单状态说明</a></td>
						<td><a href="###">自助申请退换货</a></td>
						<td><a href="###">运营服务</a></td>
					</tr>
					<tr>
						<td><a href="###">账户管理</a></td>
						<td><a href="###">礼品卡支付</a></td>
						<td><a href="###">自助取消订单</a></td>
						<td><a href="###">退换货进度查询</a></td>
						<td><a href="###">加入唯品会</a></td>
					</tr>
					<tr>
						<td><a href="###">会员优惠</a></td>
						<td><a href="###">银行转账</a></td>
						<td><a href="###">自助修改订单</a></td>
						<td><a href="###">退款方式和时间</a></td>
						<td><a href="###"></a></td>
					</tr>
				</table>
			</div>
			<div class="logo">
				<a href="###"><img src="/img/logo_00.png"/></a>
			</div>
			<div class="end">
				<a href="###">公司简介</a>|
			<a href="###">Investor  Relations</a> |
			<a href="###">网站联盟</a>  |
			<a href="###">乐购招商</a>  |
			<a href="###">机构销售</a>  |
			<a href="###">手机乐购</a>  |
			<a href="###">官方Blog</a>  |
			<a href="###">热词搜索</a>  
			
			</div>
			
			<p>Copyright &copy; 乐购网  2014 - 2016  All Right Reserved </p>
		</div>
		<!--网页底部结束-->
	</body>
</html>
